<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>面向对象-事件绑定1(行为，结构，样式分离)</title>
    <!--<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>-->
</head>
<style>
    a{background: gray;width: 200px;height: 200px; display: block;margin: 20px;}
    #test4{position:absolute;z-index: 1000;left: 100px;top: 100px;background: yellow}
</style>
<script>
    window.onload = function(){
//        alert("页面加载了")

        document.getElementById('test1').onclick = function(){
            alert("葵花点穴手")
        };


        document.getElementById('test2').onclick = function(){
            this.style.background = "#F00";
        }

        document.getElementById('test3').onclick = function(e){
           console.log(e);
           var test4 =  document.getElementById("test4");

            test4.style.left = e.clientX + 'px';
            test4.style.top = e.clientY + 'px';
        }

//        鼠标跟随

//        document.getElementById('test3').onmousemove = function(e){
//            var test4 =  document.getElementById("test4");
//
//            test4.style.left = e.clientX + 'px';
//            test4.style.top = e.clientY + 'px';
//        }

        document.getElementById('test4').onclick = function(e){
            console.log(e);
        }
    }



</script>
<body>
<p>行为，结构，样式分离,用事件属性绑定事件函数</p>
<a href="#" id="test1">DoraCMS</a>
<a href="#" id="test2">test2</a>
<a href="#" id="test3">test3</a>
<a href="#" id="test4">test4</a>
</body>
</html>

